﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>运动效果</title>
    <style type="text/css">
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #focus {
        position: relative;
        width: 810px;
    }
    
    #bigpic {
        height: 320px;
    }
    
    #bigpic li {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #smallpic {
        margin-top: 10px;
    }
    
    #smallpic li {
        display: inline-block;
    }
    
    #smallpic img {
        width: 120px;
    }
    
    .prev,
    .next {
        position: absolute;
        left: 10px;
        top: 50%;
        margin-top: -40px;
        padding: 10px;
        background: rgba(0, 0, 0, .2);
        font-size: 30px;
        color: #ccc;
        text-decoration: none;
    }
    
    .next {
        left: auto;
        right: 10px;
    }
    
    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, .5);
    }
    </style>
    <script src="../../../../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(function(){
    		var n = 0;
    		
    		function change(){
    			$('#bigpic img').css('opacity',0);
	    		$('#bigpic img').eq(n).css('opacity',1);
	    		$('#smallpic img').css('opacity',0.5);
	    		$('#smallpic img').eq(n).css('opacity',1);
    		}
    		
    		change();
    		
    		function resetTimer(){
    			window.clearInterval(timer);
    			timer = window.setInterval(setTimer,3000);
    		}
    		
    		function setTimer(){
    			n++;
	    		if(n == $('#bigpic img').length){
	    			n = 0;
	    		};
	    		change();
    		};
    		
    		var timer = window.setInterval(setTimer,3000);
    		
    		$('#smallpic img').each(function(index){
    			$(this).mouseover(function(){
    				window.clearInterval(timer);
    				n = index;
    				change();
//  				$('#bigpic img').css('opacity',0);
//  			    $('#bigpic img').eq(index).css('opacity',1);
//  			    $('#smallpic img').css('opacity',0.5);
//  			    $('#smallpic img').eq(index).css('opacity',1);
    			    
    			});
    			$(this).mouseout(function(){
    				resetTimer()
    			});
    		});
    		
    		$('.prev').click(function(){
    			window.clearInterval(timer);
    			n--;
    			if(n < 0){
	    			n = 2;
	    		};	
	    		change();
    		});
    		$('.prev').mouseout(function(){
    			resetTimer()	
    		});
    		
    		$('.next').click(function(){
    			window.clearInterval(timer);
    			n++;
	    		if(n == $('#bigpic img').length){
	    			n = 0;
	    		};	
	    		change();
    		});
    		$('.next').mouseout(function(){
    			resetTimer()
    		});
    		
    		$('#bigpic').mouseover(function(){
    			window.clearInterval(timer);
    		});
    		$('#bigpic').mouseout(function(){
    			resetTimer()
    		})
    	})
    </script>
</head>

<body>
    <div id="focus">
        <ul id="bigpic">
            <li><img src="images/001.jpg"></li>
            <li><img src="images/002.jpg"></li>
            <li><img src="images/003.jpg"></li>
        </ul>
        <ul id="smallpic">
            <li><img src="images/001.jpg"></li>
            <li><img src="images/002.jpg"></li>
            <li><img src="images/003.jpg"></li>
        </ul>
        <a href="#" class="prev">&lt;</a>
        <a href="#" class="next">&gt;</a>
    </div>
</body>

</html>
